import React, { Component } from 'react';
import styles from './style.scss';
import PropTypes from 'prop-types';
import { noop } from '@utils';
import { Icon } from 'antd';

class Button extends Component {
    static propTypes = {
        className: PropTypes.string,
        type: PropTypes.string,
        disabled: PropTypes.bool,
        icon: PropTypes.string,
        href: PropTypes.string,
        target: PropTypes.string,
        htmlType: PropTypes.string,
        onClick: PropTypes.func
    };

    static defaultProps = {
        type: 'B',
        disabled: false,
        icon: '',
        href: '',
        target: '',
        htmlType: 'button',
        onClick: noop
    };

    render() {
        const { className, type, disabled, icon, theme, href, target, htmlType, onClick, children, ...others } = this.props;
        let element;
        let classNames = `${styles.button}`;
        switch(type) {
            case 'A':
                classNames += ` ${styles.A}`;
                break;
            case 'B':
                classNames += ` ${styles.B}`;
                break;
            case 'C':
                classNames += ` ${styles.C}`;
                break;
            case 'D':
                classNames += ` ${styles.D}`;
                break;
            case 'E':
                classNames += ` ${styles.E}`;
                break;
            case 'F':
                classNames += ` ${styles.F}`;
                break;
            case 'G':
                classNames += ` ${styles.G}`;
                break;
            case 'H':
                classNames += ` ${styles.H}`;
                break;
            default:
                classNames = `${styles.button}`;
        }
        disabled && (classNames += ` ${styles.disabled}`);
        className && (classNames += ` ${className}`);
        if (href) {
            element = (
                <a 
                    href={href}
                    target={target}
                    className={classNames}
                    onClick={disabled ? noop : onClick} 
                    {...others}
                >
                    {icon && <Icon type={icon} theme={theme} />}
                    <span>{children}</span>
                </a>
            )
        } else {
            element = (
                <button 
                    type={htmlType} 
                    className={classNames}
                    onClick={disabled ? noop : onClick} 
                    {...others}
                >
                    {icon && <Icon type={icon} theme={theme} />}
                    <span>{children}</span>
                </button>
            )
        }
        return element;
    }
}

export default Button;
